<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .main-content {
            padding: 20px;
            margin-top: 60px;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-dark bg-dark fixed-top">
        <div class="container-fluid">
            <a class="navbar-brand" href="/admin">微信推送服务管理后台</a>
            <div class="d-flex">
                <a href="/admin/logout" class="btn btn-outline-light">退出登录</a>
            </div>
        </div>
    </nav>

    <div class="container-fluid main-content">
        <h2><%= title %></h2>
        <div class="table-responsive">
            <table class="table table-striped table-sm">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>OpenID</th>
                        <th>昵称</th>
                        <th>关注时间</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <% users.forEach(user => { %>
                        <tr>
                            <td><%= user.id %></td>
                            <td><%= user.openid %></td>
                            <td><%= user.nickname || '未设置' %></td>
                            <td><%= new Date(user.subscribeTime).toLocaleString() %></td>
                            <td><%= user.status === 1 ? '正常' : '禁用' %></td>
                            <td>
                                <button class="btn btn-sm btn-outline-primary">编辑</button>
                                <% if(user.status === 1) { %>
                                    <button class="btn btn-sm btn-outline-danger">禁用</button>
                                <% } else { %>
                                    <button class="btn btn-sm btn-outline-success">启用</button>
                                <% } %>
                            </td>
                        </tr>
                    <% }); %>
                </tbody>
            </table>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 这里添加前端交互逻辑
        document.querySelectorAll('.btn-outline-danger').forEach(btn => {
            btn.addEventListener('click', async (e) => {
                const userId = e.target.closest('tr').querySelector('td:first-child').textContent;
                await fetch(`/admin/users/${userId}/disable`, { method: 'POST' });
                location.reload();
            });
        });

        document.querySelectorAll('.btn-outline-success').forEach(btn => {
            btn.addEventListener('click', async (e) => {
                const userId = e.target.closest('tr').querySelector('td:first-child').textContent;
                await fetch(`/admin/users/${userId}/enable`, { method: 'POST' });
                location.reload();
            });
        });
    </script>
</body>
</html>